<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/zepto.min.js"></script>
    <script src="./js/touch.js"></script>
    <script src="./js/zepto.fx.js"></script>
    <link rel="stylesheet" href="./css/second.css">
    <link rel="stylesheet" href="./css/fanhui.css">
</head>
<body>
    <div class="container">
            <div class="banner">
                <!-- <a href="./shopping.html"><img src="./image/fanhui.png" alt=""></a> -->
                <a href="./shopping2.html"><span class="iconfont icon-fanhui" style="display: block;padding-top: 10px;"></span></a>
                <h3>填写订单</h3>   

            </div>
       
            <div class="banner-bottom">
               <label for="">
                 <textarea name="" id="" cols="" rows="" placeholder="广东省深圳市南山区西丽镇沙河西路12号丽新花园6栋1502号" style="width: 100%;height: 80px;"></textarea>
               </label>
            </div>
            <div class="banner-bot-color"></div>
            <div class="main">
                <div class="commodity">
                    <div class="pic"></div>
                    <div class="pic"></div>
                    <div class="pic"></div>
                    <div class="sum-comm"><h6>共六件商品</h6></div>
                </div>
                <div class="discounts">
                    <h5>优惠券</h5>
                    <h5>6张</h5>
                    </div>
                    <div class="ax_default">
                        <div>
                        <h5>商品金额</h5>
                        <h5>￥200.00</h5>
                       </div>
                        <div>
                        <h5>活动优惠</h5>
                        <h5>-￥12.00</h5>
                       </div>
                        <div>
                        <h5>优惠券</h5>
                        <h5>-￥20.00</h5>
                        </div>
                        <div>
                        <h5>运费</h5>
                        <h5>+￥0.00</h5>
                    </div>
                    </div>
                    <div class="leaveWord">
                        <textarea name="" id="" cols="" rows="" placeholder="买家留言，四十五字以内" maxlength="45" style="width: 100%;height: 60px;margin-top: 20px;"></textarea>

                    </div>
                    
            </div>
            <div class="footer">
                <h5>应付：￥168.00</h5>
                <div class="foot-account">
                  
                    <h5><a href="" style="color: white;">去付款</a></h5>
                </div>
            </div>
            <div class="foot-hidden">
                <div class="bottom-frame-del">
                    <img src="./image/quxiao (1).png" alt="" style="float: right;width: 18px;height: 18px;margin: 5px 5px;" class="cancel">
            </div>
            <div class="bot-pic"> </div>
            <span style="color: #5f5f5f;font-weight: 800;margin-left: 10px;margin-top: 50px;float: left;">价格：</span>
            <span style="color: red;font-weight: 400;margin-top: 50px;float: left;">￥11</span>
            <span style="color: #5f5f5f;font-weight: 400;margin-left: 10px;margin-top: 70px;float: left;margin-left: -82px;">库存：8813</span>
            <div class="bot-bot">
                <h4 style="margin-left:10px;margin-top:10px;">属性名称1</h4>
                 <div><h4>属性值1</h4></div>
                 <div><h4>属性值2</h4></div>
                 <div><h4>属性值3</h4></div>
                 <h4 style="margin-left:10px;margin-top:30px;float: left;margin-right: 200px;">属性名称2</h4>
                 <div><h4>属性值1</h4></div>
                 <div><h4>属性值2</h4></div>
                 <div><h4>属性值3</h4></div>
          </div>
          <div class="bot-confirm">
           <a href="#"><h3 style="text-align: center;margin-top: 10px;color: white;">确定</h3></a>
            </div>
        </div>

      <div class="foot-hid-two">
          <h4>商品清单</h4>
          <img src="./image/quxiao (1).png" alt="" class="cancel-two">
                <div class="coupon"><input type="radio" name="cou"></div>
                <div class="coupon"><input type="radio" name="cou"></div>
                <div class="coupon"><input type="radio" name="cou"></div>
                <div class="coupon"><input type="radio" name="cou"></div>
      </div> 

        </div>
<script>
$(".commodity").tap(function(){
    $(".foot-hidden").animate({
        bottom:"40px"
    },1000)
    $(".foot-bot").hide();
})
$(".cancel").tap(function(){
    $(".foot-hidden").animate({
        bottom:"-480px"
    },1000)
    $(".foot-bot").show();
})
$(".discounts").tap(function(){
    $(".foot-hid-two").animate({
        bottom:"0px"
    },1500)
    $(".foot-bot").hide();
})

$(".cancel-two").tap(function(){
    $(".foot-hid-two").animate({
        bottom:"-850px"
    },1500)
    $(".foot-bot").show();
})

</script>
</body>
</html>